<template>
  <div class="detail-page-main flex flex-colunm">
    <Header />
    <div class="detail-page-wrap flex1">
      <div class="mt60"></div>
      <div class="flex">
        <div class="detail-shop-img">
          <el-image
            class="main-img"
            fit="contain"
            :preview-src-list="bannerData"
            :initial-index="imgIndex"
            :src="indexImg"
            lazy
          />
          <div class="flex align-center mt10">
            <img
              class="left-icon cursor"
              src="@img/left-icon.png"
              @click="bannerSwiper.slidePrev"
            />
            <swiper
              slides-per-view="auto"
              :initial-slide="0"
              class="swiper-wrap"
              @swiper="bannerSwiper.onSwiper"
              @slide-change="bannerSwiper.onSlideChange"
            >
              <SwiperSlide
                v-for="(v, i) in bannerData"
                :key="v"
                :class="`swiper-shop-item relative cursor  ${i == imgIndex ? 'active' : ''}`"
                fit="cover"
                @click="imgIndex = i"
              >
                <el-image fit="contain" :class="`swiper-img`" :src="v" lazy />
              </SwiperSlide>
            </swiper>
            <img
              class="right-icon cursor"
              src="@img/right-icon.png"
              @click="bannerSwiper.slideNext"
            />
          </div>
        </div>
        <div class="ml60">
          <div class="detail-title">{{ detailData.title }}</div>
          <div class="detail-describe ellipsis-multiline">
            {{ detailData.describe }}
          </div>
          <div class="detail-consult" @click="dialogVisible = true">
            {{ detailData.language.product_quote }}
          </div>
        </div>
      </div>
      <div class="product-details">
        <div class="product-details-title">
          {{ detailData.language.product_detail }}
        </div>
        <div class="product-details-border"></div>
        <div class="product-details-content" v-html="detailData.content"></div>
      </div>
    </div>
    <Footer />
    <el-dialog v-model="dialogVisible" width="470">
      <template #title>
        <span class="visible-title">{{
          detailData.language.product_quote
        }}</span>
      </template>
      <div class="flex flex-colunm space-center align-center">
        <el-input v-model="feedbackData.email" :placeholder="submitMsg.eamil" />
        <el-input
          v-model="feedbackData.context"
          :rows="2"
          type="textarea"
          :placeholder="submitMsg.message"
        />
      </div>
      <template #footer>
        <div class="dialog-footer flex align-center space-center">
          <div
            class="visible-cancel flex align-center space-center"
            @click="dialogVisible = false"
          >
            {{ submitMsg.cancel }}
          </div>
          <div
            class="visible-submit flex align-center space-center"
            @click="feedbackSend"
          >
            {{ submitMsg.send }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
const { state } = usePageData()
const { $apiFetch } = useNuxtApp()
const route = useRoute()
const imgIndex = ref(0)
const dialogVisible = ref(false)

const detailData = useState('detail-data', () => {})
const feedbackData = ref({
  email: '',
  context: '',
})

const bannerData = computed(() => {
  return detailData.value?.shop_window || []
})

const bannerSwiper = useSwiper(bannerData.value)

const goUrl = () => {}

const submitMsg = ref({})

const indexImg = computed(() => {
  return bannerData.value[imgIndex.value]
})

const feedbackSend = async () => {
  const { email, context } = feedbackData.value
  const res = await $apiFetch(`/submit`, {
    method: 'POST',
    body: {
      email,
      context,
      lang: state.value.language,
    },
  })
  alert(res.message)
}

const { data, error } = await useAsyncData('products-detail-data', () =>
  $apiFetch(`/product/detail`, {
    method: 'GET',
    params: {
      lang: state.value.language,
      id: route.query.id,
    },
  }),
)

if (!error.value) {
  detailData.value = data.value.data
}

onMounted(() => {
  $apiFetch(`/pop_window`, {
    method: 'GET',
    params: {
      lang: state.value.language,
    },
  }).then((res) => {
    console.log('res.data---', res.data)
    submitMsg.value = res.data
  })
})
</script>
<style lang="scss" scoped>
.pull-down-list {
  width: 300px;
  .pull-down-item {
    font-weight: bold;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
}
.detail-page-main {
  min-width: 1200px;
  overflow: auto;
  background: #fff;
  height: 100%;

  .mt60 {
    margin-top: 60px;
  }

  .dialog-footer {
    padding-bottom: 36px;

    .visible-cancel {
      width: 153px;
      height: 32px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      cursor: pointer;
    }

    .visible-submit {
      width: 153px;
      height: 32px;
      background: #00b9ef;
      border: 2px solid #00b9ef;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      margin-left: 16px;
      cursor: pointer;
    }
  }

  :deep(.visible-title) {
    font-weight: bold;
    font-size: 24px;
    color: #000000;
  }

  :deep(.el-input) {
    width: 322px;
    height: 36px;
    background: #ffffff;
  }

  :deep(.el-textarea) {
    width: 322px;
    height: 113px;
    background: #ffffff;
    margin-top: 16px;

    .textarea {
      height: 113px;
    }
  }

  :deep(.el-textarea textarea) {
    height: 113px;
  }

  .product-details {
    margin-top: 127px;

    .product-details-title {
      font-weight: 800;
      font-size: 24px;
      color: #171a26;
    }
  }

  .product-details-border {
    width: 1000px;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    margin-top: 12px;
    position: relative;

    &:after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: #00b9ef;
      position: absolute;
      top: -4px;
    }
  }

  .detail-title {
    font-weight: 800;
    font-size: 48px;
    color: #080b20;
  }

  .detail-describe {
    font-weight: 400;
    font-size: 24px;
    color: #333333;
    margin-top: 24px;
  }

  .product-details-content {
    min-height: 1000px;
    padding: 40px 0;
    :deep(img) {
      display: block;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: none;
    }
  }

  .detail-consult {
    display: inline-flex;
    height: 48px;
    padding: 0 10px;
    background: #00b9ef;
    border: 2px solid #00b9ef;
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    margin-top: 62px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cursor {
    cursor: pointer;
  }

  .swiper-shop-item {
    // width: 82px;
    // height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-detail-wrap {
    background: #171a26;
    width: 100%;
    margin: 0 auto;

    .header-detail-main {
      width: 1200px;
      margin: 0 auto;
      height: 126px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .head-wrap-logo {
      width: 280px;
      height: 68px;
    }
  }

  .left-icon {
    width: 40px;
    height: 40px;
  }

  .ellipsis-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 定义文本的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .right-icon {
    width: 40px;
    height: 40px;
  }

  .detail-page-wrap {
    background-color: #fff;
    // min-height: 577px;
    width: 1000px;
    margin: 0 auto;
  }

  .swiper-wrap {
    width: 260px;
    margin: 0;
    display: flex;
  }

  .swiper-slide {
    max-width: 82px;

    height: 82px;
    // border: 2px solid #00b9ef;
    margin-right: 15px;
    position: relative;

    &.active {
      &:after {
        content: '';
        display: block;
        width: 78px;
        height: 78px;
        border: 2px solid #00b9ef;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  .swiper-img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
  }

  .ml60 {
    margin-left: 60px;
  }

  .white {
    color: #fff !important;
  }

  .ml40 {
    margin-left: 40px !important;
  }

  .ml48 {
    margin-left: 48px !important;
  }

  .ml10 {
    margin-left: 10px !important;
  }

  .fs-24 {
    font-size: 24px !important;
  }

  .detail-shop-img {
    .main-img {
      width: 350px;
      height: 350px;
    }
  }

  .mt10 {
    margin-top: 10px;
  }
}
</style>
